<template>
    <div class="bill-layout">
        <div class="grid-content bor-radius-10 mg-bo-10 pos-relative card-row"
             @click="handler(index)"
        >
            <div style="position:absolute; z-index:1;left: 4px; top: 2px;">
                <el-checkbox @change="setUser" v-model="state"></el-checkbox>
            </div>
            <span class="more" v-if="item.state == 1">>></span>
            <span v-else-if="item.state == 0" class="settlement" @click.stop='goCount(item)'>
              结算
            </span>
            <div class="card-01" style="position:relative; z-index:2;">
                <el-row :gutter="20">

                    <el-col :span="8">
                        <div class="grid-content pd">
                            <img src="../../../../static/img/member.png">
                        </div>
                    </el-col>

                    <el-col :span="16">
                        <div class="grid-content text">
                            <h6>{{ item.memberName || '非会员' }}</h6>
                            <p class="l2">{{ item.sn }}</p>
                            <span>{{ item.bizdate }}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="vip-price">
                <small>实收：</small>
                <span>{{ (item.received).toFixed(2) }}</span>
            </div>
            <!-- <span>Checked names: {{ checkedNames }}</span> -->
        </div>
    </div>
</template>

<script>
    import cfg from '../../../properties';
    import axios from '../../../util/http';
    import qs from 'qs';
    export default {
        props: {
            item: '',
            index: ''
        },
        data: function () {

            return {
                classItem: [],
                checkedNames: [],
                isMultiselect: true,
                state: false,
                static_url: this.$cfg.static_url + "/"

            }
        },
        methods: {
            handler: function (index) {
                this.state = !this.state;
                this.setUser();
            },
            setUser: function () {
                if (this.state) {
                    this.$emit('transferUser', this.item)
                } else {
                    this.$emit('deleteUser', this.item)
                }
            },
            goCount(item){
                this.$router.push({
                    name:'',
                    path: '/cashierProcess',
                    query: {
                        item: item,
                    }
                })
            }
        }

    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
    .bill-layout {
        padding: 0;
    }

    .card-01 {
        padding-bottom: 0;
        padding-top: 1.5em;
    }

</style>
